<template>
  <view class="user-center-container">
    <!-- 用户信息卡片 -->
    <view class="user-card" v-if="userInfo">
      <image class="avatar" :src="userInfo.avatar || '/static/default-avatar.png'"></image>
      <view class="user-info">
        <text class="username">{{ userInfo.name }}</text>
        <text class="user-id">手机号: {{ userInfo.username }}</text>
      </view>
    </view>

    <!-- 功能菜单 -->
    <view class="menu-list">
      <view class="menu-item" @click="navigateTo('/pages/add/address-list')">
        <image class="arrow" src="/static/我的地址.png"></image>
        <text class="menu-text">我的地址</text>
      </view>

      <view class="menu-item" @click="navigateTo('/pages/me/mefollowing')">
        <image class="arrow" src="/static/我的关注.png"></image>
        <text class="menu-text">我的关注</text>
      </view>

      <view class="menu-item" @click="switchTab('/pages/dingdan/dingdan')">
        <image class="arrow" src="/static/我的订单.png"></image>
        <text class="menu-text">我的订单</text>
      </view>
    </view>

    <!-- 退出登录按钮 -->
    <view class="logout-btn" @click="logout">
      <text>退出登录</text>
    </view>
  </view>
</template>

<script>
import config from "@/config.js";

export default {
  data() {
    return {
      userInfo: null
    };
  },
  onShow() {
    this.checkLoginStatus();
    this.fetchUserInfo();
  },
  methods: {
    checkLoginStatus() {
      const token = uni.getStorageSync('token');
      if (!token) {
        uni.redirectTo({ url: '/pages/login/login' });
      }
    },
    fetchUserInfo() {
      const userId = uni.getStorageSync('userId');
      if (!userId) return;

      uni.request({
        url: `${config.api_host}users/${userId}`,
        method: 'GET',
        success: (res) => {
          this.userInfo = res.data;
        },
        fail: (error) => {
          console.error('获取用户信息失败:', error);
          uni.showToast({
            title: '获取用户信息失败',
            icon: 'none'
          });
        }
      });
    },
    switchTab(path) {
      uni.switchTab({ url: path });
    },
    navigateTo(path) {
      uni.navigateTo({ url: path });
    },
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 清除登录状态
            uni.removeStorageSync('token');
            uni.removeStorageSync('userId');
            uni.removeStorageSync('userInfo');
            // 跳转到登录页
            uni.redirectTo({ url: '/pages/login/login' });
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.user-center-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.user-card {
  display: flex;
  align-items: center;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 15px;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.username {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
}

.user-id {
  font-size: 14px;
  color: #666;
}

.menu-list {
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-text {
  flex: 1;
  margin-left: 22px;
  font-size: 16px;
  padding: 10px;
}

.arrow {
  width: 20px;
  height: 20px;
}

.logout-btn {
  background-color: #fff;
  color: #ff4444;
  text-align: center;
  padding: 15px;
  border-radius: 10px;
  font-size: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
</style>    